<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>AIC</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			[v-cloak] {
				display: none;
			}
			
			.quotes {
				width: 100%;
				height: 60px;
				border-top: 1px solid #dadada;
				border-bottom: 1px solid #dadada;
				background: #fff;
				padding: 0px 0px;
				margin-top: 0px;
			}
			
			.h10clear {
				height: 0px;
				clear: both;
				overflow: hidden
			}
			
			.mui-scroll-wrapper {
				position: absolute;
				z-index: 2;
				top: auto;
				bottom: auto;
				left: 0;
				overflow: hidden;
				width: 100%;
			}
			
			.sell-lists {
				width: 100%;
				height: 100%;
			}
			
			.mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 15px;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #222;
			}
			
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 5px 0px;
				-webkit-touch-callout: none;
			}
			
			.sell-lists .item {
				margin-bottom: 2px;
				border-top: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				background: #fff;
				height: 120px;
				overflow: hidden;
				position: relative
			}
			
			.bg-img {
				background-image: url(../images/mainBg.jpg);
			}
			
			.quotes p:first-child {
				color: red;
				font-size: 12px;
			}
			
			.quotes p,
			.quotes p s,
			.tabs dl dd a,
			.quotes p:last-child span,
			.search dl dd a,
			.item span,
			.item dl dd {
				color: #282633;
				font-size: 12px;
			}
			
			.quotes p:last-child span s,
			.item dl dd strong {
				font-size: 12px!important;
			}
		</style>
	</head>

	<body>
		<div class="mui-content bg-img" id="aicVue" v-cloak>
			<!-- 行情 -->
			<div class="quotes">
				<p style="text-align: center;font-size: 18px;" id="currentPrice">￥{{priceBook.closePrice}}</p>
				<p>
					<span>
            高：<s>{{priceBook.highPrice}}</s>  <br/>  
      	    低：<s>{{priceBook.lowPrice}}</s>
      		</span>
					<span>
            量：<s>{{priceBook.vol}}</s>  <br/>  
      	    幅：<s>{{priceBook.rise * 100}}%</s>
      		</span>
				</p>
			</div>
			<div class="h10clear"></div>
			<!-- 选项卡 -->
			<section class="tabs">
				<dl>
					<dd class="ac">
						<a href="#">卖出</a>
					</dd>
					<dd>
						<a href="../jiaoyi/buy.html">买入</a>
					</dd>
					<dd>
						<a href="../jiaoyi/transing-order.html">交易中订单</a>
					</dd>
				</dl>
			</section>

			<!-- 检索 -->
			<section class="search">
				<dl>
					<dd style="width: 60%;">
						<div class="container" style="font-size: 12px;"><input type="text" @keyup.enter="filter" v-model="orderNo" placeholder="手机号或订单号" /><input type="button" value="" @click="filter" class="searchBtn" /></div>
					</dd>
					<dd style="width: 40%;">
						<a @click="select">{{text}}<s></s></a>
					</dd>
				</dl>
			</section>

			<!-- 出售列表 -->
			<div class="sell-lists mui-scroll-wrapper" id="refreshContainer">
				<div class="mui-scroll">
					<ul id="mlist" class="mui-table-view">
						<li class="mui-table-view-cell" v-for="mitem in mlist">
							<div class="item" @tap="open_result(mitem)">
								<img :src="mitem.headImg == null ? '../images/default-headImg.jpg' : mitem.headImg" />
								<span class="myInfo">{{mitem.nickname }}&nbsp;&nbsp; 交易单数: {{mitem.dealCount}}</span>
								<a class="toSell">卖给ta</a>
								<dl>
									<dd class="split"><strong>￥{{mitem.coinPrice}}</strong>单价</dd>
									<dd class="split"><strong>{{mitem.coinQuantity}}</strong>数量</dd>
									<dd><strong>￥{{mitem.coinTotalPrice}}</strong>总金额</dd>
								</dl>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script language="javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script language="javascript">
		mui.init({
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				up: {
					callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});

		//绑定数据
		var vm = new Vue({
			el: '#aicVue',
			data: {
				mlist: [],
				text: "所有数量",
				quantity: "",
				orderNo: "",
				priceBook: {
					rise: 0.01
				}
			},
			mounted: function() {
				mui.plusReady(function() {
					refreshData();
					mui.postParam(MarketInfo, {}, function(result) {
						if(result.code == 0) {
							vm.priceBook = result.priceBook;
							plus.storage.setItem("priceBook", JSON.stringify(result.priceBook));
							plus.storage.setItem("priceBookUSD", JSON.stringify(result.priceBookUSD));
						}

					});
				});
			},
			methods: {
				open_result: function(item) {
					mui.openWindow({
						id: 'sell_commit',
						url: '../jiaoyi/sell_commit.html',
						extras: {
							mid: item.id
						}
					});
					mui('#refreshContainer').pullRefresh().disablePulldownToRefresh();
				},
				filter: function() {
					page = 1;
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
					refreshData();
				},
				select: function() {
					var btnArray = [{
						title: "所有数量"
					}, {
						title: "1 - 50 AIC"
					}, {
						title: "50-100 AIC"
					}, {
						title: "100-200 AIC"
					}, {
						title: "200-500 AIC"
					}, {
						title: "500-1000 AIC"
					}, {
						title: "1000以上"
					}];
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: btnArray
					}, function(e) {
						var index = e.index;
						switch(index) {
							case 1:
								vm.quantity = "";
								vm.text = "所有数量";
								break;
							case 2:
								vm.quantity = "1,50";
								vm.text = "[1-50]";
								break;
							case 3:
								vm.quantity = "50,100";
								vm.text = "[50-100]";
								break;
							case 4:
								vm.quantity = "100,200";
								vm.text = "[100-200]";
								vm.break;
							case 5:
								vm.quantity = "200,500";
								vm.text = "[200-500]";
								vm.break;
							case 6:
								vm.quantity = "500,1000";
								vm.text = "[500-1000]";
								break;
							case 7:
								vm.quantity = "1000,1000000";
								vm.text = "[1000以上]";
								break;
						}
						if(e.index != 0) {
							vm.filter();
						}
					});
				}
			}
		});

		function refreshData() {
			page = 1;
			loadMoreData();
		}

		function loadMoreData() {
			var data = {
				"page": page,
				quantity: vm.quantity,
				orderNo: vm.orderNo
			};
			mui.postParam(GetOrders, data, function(result) {
				mConsole.log("加载更多挂单：" + JSON.stringify(result));
				if(result.code == 0) {
					totalPage = result.page.totalPage;
					cuPage = result.page.currPage;
					if(page == 1) {
						vm.mlist.splice(0, vm.mlist.length);
					}
					vm.mlist = vm.mlist.concat(result.page.list);
					page += 1;
					if(result.page.currPage >= result.page.totalPage) {
						mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
					}
				} else {
					mymui(result.msg);
				}
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(result.page.currPage >= result.page.totalPage);
			});
		}
		
		$(document).ready(function() {
			$("#currentPrice").toggle(function() {
					vm.priceBook = JSON.parse(plus.storage.getItem("priceBookUSD"));
					$("#currentPrice").text("$ " + vm.priceBook.closePrice);
				},
				function() {
					vm.priceBook = JSON.parse(plus.storage.getItem("priceBook"));
					$("#currentPrice").text("￥" + vm.priceBook.closePrice);
				}
			);
		});
		
		//删除数据
		window.addEventListener("removeItem", function(event) {
			for(var i = vm.mlist.length - 1; i >= 0; i--) {
				var item = vm.mlist[i];
				if(item.id == event.detail.id) {
					//删除元素
					vm.mlist.splice(i, 1);
					break;
				}
			}
		});
	</script>

</html>